<!-- src/main/resources/templates/fragments/header.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 样式将在common-styles中统一管理 -->
</head>
<body>
<div th:fragment="hearder">
    <!-- 顶部导航栏 -->
    <header class="header-container">
        <div class="header-content">
            <!-- Logo区域 -->
            <div class="logo-area">
                <a href="/user/index" class="logo-link">
                    <img src="/images/avatars/default-logo.png" alt="体育器材租赁" class="logo-img"
                         onerror="this.src='/images/avatars/default-logo.png'"/>
                    <span class="logo-text">体育器材租赁</span>
                </a>
            </div>

            <nav class="main-nav">
                <a href="#" class="nav-item">首页</a>
                <a href="#" class="nav-item" id="nav-notice">公告</a>
            </nav>

            <!-- 搜索区域 -->
            <div class="search-area">
                <div class="search-box">
                    <input type="text" placeholder="搜索器材名称..." class="search-input"
                           id="searchInput"/>
                    <button class="search-btn">
                        <i class="icon-search"></i>
                    </button>
                </div>
            </div>

            <!-- 用户中心 -->
            <div class="user-area" id="userArea">
                <div class="user-info">
                    <img class="user-avatar"
                         src="/images/avatars/default-logo.png"
                         alt="avatar"
                         id="headerAvatar">
                    <span class="username" id="headerUserName">加载中...</span>
                    <i class="icon-arrow"></i>
                </div>
                <ul class="user-menu">
                    <li><a href="javascript:void(0)" data-action="user-center" id="user-center">个人中心</a></li>
                    <li><a href="javascript:void(0)" data-action="user-orders" id="user-orders">我的订单</a></li>
                    <li><a href="javascript:void(0)" data-action="logout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>
</div>
</body>
</html>